<template>
  <div class="product-order">
    <div
      class="address-box"
      @click="onSelectAdderss"
      v-if="orderInfo.is_courier"
    >
      <div class="txt">
        <div>{{ address || "选择收货地址" }}</div>
        <div class="user" v-if="userName && telNumber">
          {{ userName + "" + telNumber }}
        </div>
      </div>
      <div class="icon"></div>
    </div>

    <div class="info-box">
      <div class="pic">
        <img :src="orderInfo.cover_picture" class="img-size-100" />
      </div>
      <div class="txt">
        <div class="name">
          {{ orderInfo.title }}
        </div>
        <div class="intro">
          <text>{{ orderInfo.product_specification_title }}</text>
        </div>
        <div class="tag" v-if="orderInfo.special_tag">
          {{ orderInfo.special_tag }}
        </div>
      </div>
      <div class="price">
        <div class="number">{{ orderInfo.price / 100 }}</div>
        <div>美粉币</div>
        <div style="margin-top:24rpx">数量 {{ orderInfo.product_number }}</div>
      </div>
    </div>

    <div class="h20"></div>

    <div class="message-box">
      <text class="title">留言</text>
      <input
        class="input"
        type="text"
        :value="remark"
        @input="onInput"
        placeholder="选填，告诉商家你的要求"
      />
    </div>

    <div class="h20"></div>

    <div class="details-box">
      <div class="item" @click="payWayShow = true">
        <div class="left">支付方式</div>
        <div style="display:flex;align-items: center;">
          <div class="right">
            {{ payTypeText }}
            <block v-if="payType == 1">(剩余{{ userInfo.amount_name }})</block>
          </div>
          <div class="icon"></div>
        </div>
      </div>
      <div class="item" @click="openCouponPop">
        <div class="left">优惠券</div>
        <div style="display:flex;align-items: center;">
          <div class="right">
            <text style="color:#FF7900;font-size:32rpx" v-if="couponAmount">{{
              -couponAmount / 100 + ".00"
            }}</text>
            <template v-else>
              <text
                v-if="
                  couponData.available.length > 0 ||
                    couponData.unavailable.length > 0
                "
                >选择优惠券</text
              >
              <text v-else style="color:#B2B2B2"
                ><text v-if="couponData.available">没有可用的优惠券</text></text
              >
            </template>
          </div>
          <div class="icon"></div>
        </div>
      </div>
      <div class="item">
        <div class="left">总计</div>
        <div class="right">
          <text class="unit"
            ><block v-if="orderInfo.freight"
              >(包含运费{{ orderInfo.freight }})</block
            >美粉币</text
          >
          <text class="number">{{
            (orderInfo.price * orderInfo.product_number) / 100
          }}</text>
        </div>
      </div>
    </div>

    <div class="wx-pay-tip" v-if="payType == 2">
      微信支付：先充值到您的账户，再自动从账户进行支付。
    </div>

    <div class="footer">
      <div class="main">
        <div class="price">
          <text>实付</text>
          <text class="txt">美粉币</text>
          <text class="number">{{ amount / 100 }}</text>
        </div>
        <button :disabled="payLoad" class="buy-btn" @click="postOrder">
          支付
        </button>
      </div>
    </div>
    <payWay
      :show="payWayShow"
      :pay-type="payType"
      :isPay="isPay"
      @updatePayWay="onSelectPayType"
      @closePayWay="payWayShow = false"
    />
    <van-popup :show="couponShow" custom-class="coupon-popup" position="bottom">
      <template v-if="couponData.available.length > 0">
        <div class="title">可用券（{{ couponData.available.length }}）</div>
        <coupon-item
          @click.native="onSelectCoupon(index, item)"
          v-for="(item, index) in couponData.available"
          :key="index"
          :isSelect="true"
          :itemData="item"
          :active="couponActiveIndex == index"
        />
      </template>
      <template v-if="couponData.unavailable.length > 0">
        <div class="title mg30">
          不可用券（{{ couponData.unavailable.length }}）
        </div>
        <coupon-item
          v-for="(item, index) in couponData.unavailable"
          :key="index"
          :itemData="item"
          :disabled="true"
        />
      </template>

      <div class="fixed-h"></div>
      <div
        class="footer-btn"
        @click="(couponShow = false), (couponActiveIndex = -1)"
      >
        不使用优惠券
      </div>
    </van-popup>
  </div>
</template>
<script>
import shbPay from "@/common/shb-pay.js";
import payWay from "@/components/pay-way";
import couponItem from "../about/coupon/_coupon/coupon-item";
import { mapState } from "vuex";
export default {
  components: {
    payWay,
    couponItem,
  },
  data() {
    return {
      payLoad: false,
      couponCode: "",
      couponData: {},
      couponActiveIndex: -1,
      couponShow: false,
      address: "",
      userName: "",
      telNumber: "",
      orderInfo: {},
      remark: "",
      orderNo: "",
      payWayShow: false,
      payType: 1,
      payTypeList: [
        { name: "微信支付", icon: "wx", type: 2 },
        { name: "余币支付", icon: "ye", type: 1, tips: "余币不足" },
      ],
    };
  },
  watch: {
    isPay: {
      handler: function(n) {
        this.payType = n ? 2 : 1;
      },
      immediate: true,
    },
  },
  computed: {
    ...mapState(["userInfo", "shareId"]),
    couponAmount() {
      if (!this.couponData.available || this.couponActiveIndex < 0) return 0;
      return this.couponData.available[this.couponActiveIndex].coupon.amount;
    },
    isPay() {
      if (!this.amount) return;
      return this.amount > this.userInfo.amount;
    },
    payTypeText() {
      if (this.payType == 0) return;
      return this.payTypeList.find((item) => item.type == this.payType).name;
    },
    amount() {
      let { product_number, price, freight } = this.orderInfo;
      let amount =
        product_number * price + parseFloat(freight) - this.couponAmount;
      return amount > 1 ? amount : 1;
    },
    isCourier() {
      return this.orderInfo.is_courier === 1
        ? this.address && this.userName && this.telNumber
        : true;
    },
  },
  onLoad(options) {
    this.orderInfo = JSON.parse(decodeURIComponent(options.orderInfo));
    if (this.orderInfo) {
      this.getCouponAvailable();
    }
  },
  onShow() {
   
  },
  methods: {
    openCouponPop() {
      if (
        this.couponData.available.length === 0 &&
        this.couponData.unavailable.length === 0
      )
        return;
      this.couponShow = true;
    },
    getCouponAvailable() {
      this.$api
        .getCouponAvailable({
          product_id: this.orderInfo.id,
          amount: this.amount,
        })
        .then((res) => {
          if (res.code == 200) {
            this.couponData = res.data;
          }
        });
    },
    onSelectCoupon(index, data) {
      this.couponActiveIndex = index;
      this.couponShow = false;
      this.couponCode = data.detail_code;
    },
    onSelectPayType(type) {
      this.payType = type;
    },
    postOrder() {
      if (!this.isCourier) {
        uni.showToast({
          title: "请填写收货信息",
          duration: 2000,
          icon: "none",
        });
        return;
      }
      this.payLoad = true;
      const {
        product_no,
        source,
        product_sku_id,
        product_number,
        product_specification_title,
      } = this.orderInfo;
      this.$api
        .postOrder({
          product_no,
          source,
          product_sku_id,
          product_number,
          product_specification_title,
          amount: this.amount,
          book_name: this.userName,
          book_phone: this.telNumber,
          book_address: this.address,
          pay_type: this.payType,
          remark: this.remark,
          order_way: this.shareId ? 1 : 0,
          order_way_val: this.shareId,
          coupon_detail_code: this.couponCode,
          amount_coupon: this.couponAmount,
        })
        .then((res) => {
          if (res.code == 200) {
            this.orderNo = res.data.order_no;
            shbPay(
              this.orderNo,
              this.amount,
              "/pages/order/orderList",
              this.payType
            );
          }
        });
    },
    onInput(e) {
      this.remark = e.detail.value;
    },
    onSelectAdderss() {
      uni.chooseAddress({
        success: (res) => {
          let {
            userName,
            provinceName,
            cityName,
            countyName,
            detailInfo,
            telNumber,
          } = res;
          this.address = provinceName + cityName + countyName + detailInfo;
          this.userName = userName;
          this.telNumber = telNumber;
        },
        fail: () => {
          wx.getSetting({
            success: (res) => {
              if (!res.authSetting["scope.address"]) {
                uni.showModal({
                  title: "提示",
                  content: "请同意访问您的通讯地址",
                  success: (res) => {
                    if (res.confirm) {
                      wx.openSetting();
                    } else if (res.cancel) {
                      // this.show = false;
                    }
                  },
                });
              }
            },
          });
        },
      });
    },
  },
};
</script>

<style lang="scss">
.product-order {
  color: #333;
  font-size: 32rpx;
  overflow: hidden;
  .van-cell {
    &::after {
      left: 0;
    }
  }
  .img-size-100 {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .h20 {
    height: 20rpx;
    background: #f4f4f4;
  }
  .mg30 {
    margin-top: 30rpx;
  }
  .coupon-popup {
    padding: 30rpx 30rpx 0;
    box-sizing: border-box;
    height: 80%;
    background: #f4f4f4;
    .title {
      font-size: 32rpx;
      color: #333;
      font-weight: 500;
    }
    .fixed-h {
      height: calc(128rpx + constant(safe-area-inset-bottom));
      height: calc(128rpx + env(safe-area-inset-bottom));
    }
    .footer-btn {
      position: fixed;
      height: calc(108rpx + constant(safe-area-inset-bottom));
      height: calc(108rpx + env(safe-area-inset-bottom));
      line-height: 108rpx;
      background: #fff;
      text-align: center;
      bottom: 0;
      left: 0;
      right: 0;
      color: #333;
      font-size: 32rpx;
    }
  }
  .address-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 38rpx 36rpx;
    overflow: hidden;
    border-bottom: 1px solid #e7e7e7;
    box-sizing: border-box;
    .txt {
      .user {
        margin-top: 9rpx;
        color: #999999;
        font-size: 28rpx;
      }
    }
    .icon {
      flex: 0 0 25rpx;
      height: 30rpx;
      background: url(https://media.wxcwy.com/mini/images/more_arrow@2x.png) no-repeat center center;
      background-size: 100% 100%;
    }
  }
  .info-box {
    padding: 30rpx;
    overflow: hidden;
    display: flex;
    .pic {
      flex: 0 0 200rpx;
      height: 180rpx;
      border-radius: 8rpx;
      overflow: hidden;
    }
    .txt {
      flex: 1;
      margin-left: 20rpx;
      .name {
        font-size: 28rpx;
        line-height: 42rpx;
        height: 84rpx;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
      }
      .intro {
        font-size: 26rpx;
        color: #999999;
        line-height: 40rpx;
        margin: 10rpx 0;
        display: flex;
        justify-content: space-between;
      }
      .tag {
        display: inline-block;
        box-sizing: border-box;
        height: 34rpx;
        line-height: 34rpx;
        border: 1px solid #ff7900;
        border-radius: 6rpx;
        padding: 0 8rpx;
        color: #ff7900;
        font-size: 22rpx;
      }
    }
    .price {
      margin-top: 10rpx;
      flex: 0 0 120rpx;
      text-align: center;
      color: #999999;
      font-size: 24rpx;
      line-height: 32rpx;
      .number {
        font-size: 32rpx;
        color: #ff7900;
        font-weight: bold;
      }
    }
  }
  .message-box {
    padding: 30rpx;
    overflow: hidden;
    display: flex;
    align-items: center;
    .input {
      flex: 1;
      margin-left: 30rpx;
      height: 40rpx;
      font-size: 28rpx;
    }
  }
  .details-box {
    padding: 0 30rpx;
    overflow: hidden;
    .item {
      height: 105rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid #e7e7e7;
      .icon {
        flex: 0 0 25rpx;
        height: 30rpx;
        background: url(https://media.wxcwy.com/mini/images/more_arrow@2x.png) no-repeat center center;
        background-size: 100% 100%;
        margin: 0 16rpx;
      }
      .right {
        font-size: 28rpx;
        white-space: nowrap;
        .unit {
          color: #999999;
        }
        .number {
          margin-left: 5rpx;
          color: #ff7900;
          font-size: 44rpx;
          font-weight: bold;
        }
      }
    }
  }
  .footer {
    height: 108rpx;
    .main {
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
      height: calc(108rpx + constant(safe-area-inset-bottom));
      height: calc(108rpx + env(safe-area-inset-bottom));
      background: #fff;
      box-sizing: border-box;
      border-top: 1px solid #e7e7e7;
      display: flex;
      line-height: 108rpx;
      padding-bottom: constant(safe-area-inset-bottom);
      padding-bottom: env(safe-area-inset-bottom);
      .price {
        flex: 1;
        text-align: center;
        color: #333333;
        font-size: 28rpx;
        height: 100%;
        .txt {
          margin: 0 5rpx 0 11rpx;
          color: #999999;
        }
        .number {
          color: #ff7900;
          font-size: 44rpx;
          font-weight: bold;
        }
      }
      .buy-btn {
        flex: 1;
        background: linear-gradient(
          270deg,
          rgba(44, 172, 255, 1) 0%,
          rgba(40, 123, 252, 1) 100%
        );
        color: #fff;
        height: 100%;
        text-align: center;
        border-radius: 0;
      }
    }
  }
  .wx-pay-tip{
    color: #e6a23c;
    font-size: 24rpx;
    padding: 30rpx;
    margin-top: 16rpx;
  }
}
</style>
